<template>
  <div class="filter">
    <div class="filter-item clearfix" v-for="(v, k) in filterObj" :key="k">
      <p class="filter-left">{{ v.text }}：</p>
      <p
        class="filter-right"
        v-for="m in v.list"
        :key="m.name + m.id"
        :class="[m.active && 'active']"
        @click="toFilter(m.id, v.key, v.value)"
      >
        {{ m.name }}
      </p>
    </div>
    <div class="filter-item clearfix">
      <p class="filter-left">企业地址：</p>
      <el-cascader
        size="small"
        :options="options"
        v-model="locat"
        @change="toLocat">
      </el-cascader>
    </div>
  </div>
</template>

<script>
import { provinceAndCityDataPlus, CodeToText, TextToCode} from 'element-china-area-data'
export default {
  props: ['filter'],
  watch: {
    filter (val) {
      JSON.stringify(this.filterObj) === '{}' && this.formatterList(val);
    }
  },
  data () {
    return {
      filterObj: {},
      options: provinceAndCityDataPlus,
      locat: ''
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    toLocat() {
      this.$emit('toLocat', this.locat)
    },
    toFilter (id, key, value) { // 搜索条件
      this.filterObj[`${value}`].list = this.filterObj[`${value}`].list.map(s => {
        s.id === id
          ? s.active = true
          : s.active = false;
        return s;
      })
      this.$emit('toFilter', { id, key })
    },
    checkList (list) { // 添加数据
      return [{ id: '', name: '不限', active: true }, ...list.map((s, i) => {
        s.active = false;
        return s;
      })]
    },
    formatterList () { // 整理数据
      const filter = this.filter;
      const obj = {
        entNatureObj: {
          text: '企业性质',
          value: 'entNatureObj',
          key: 'attrid',
          list: this.checkList(filter.attr),
        },
        industryObj: {
          text: '所属行业',
          value: 'industryObj',
          key: 'industryid',
          list: this.checkList(filter.industry)
        }
      };
      this.filterObj = obj;
    }
  }
}
</script>
<style lang="scss" scoped>
.filter {
  position: relative;
  width: 100%;
  padding: 40px 40px 30px 40px;
  margin: 20px auto;
  background: #f6f7f8;
  .filter-item {
    font-size: 14px;
    position: relative;
    padding-left: 80px;
    .filter-left {
      position: absolute;
      left: 0;
      top: 0;
      color: #333;
      min-width: 80px;
    }
    .filter-right {
      float: left;
      margin-left: 10px;
      margin-bottom: 20px;
      padding: 1px 5px;
      color: #666;
      cursor: pointer;
      &:hover,
      &.active {
        background: $base-color;
        color: #fff;
      }
    }
  }
}
</style>
